<template>
  <div v-if="showModal" class="ethereum-modal-overlay">
    <div class="ethereum-modal">
      <div class="ethereum-modal-content">
        <h2 v-if="!isBound">{{ $t('ethereum.bindAccount') }}</h2>
        <h2 v-else>{{ $t('ethereum.switchAccount') }}</h2>
        
        <div class="ethereum-modal-body">
          <p v-if="!isBound">{{ $t('ethereum.bindAccountMessage') }}</p>
          <p v-else>{{ $t('ethereum.switchAccountMessage') }}</p>
          
          <div class="account-info" v-if="currentAccount">
            <p>{{ $t('ethereum.currentAccount') }}: {{ currentAccount }}</p>
            <p v-if="boundAccount">{{ $t('ethereum.boundAccount') }}: {{ boundAccount }}</p>
          </div>
        </div>

        <div class="ethereum-modal-footer">
          <button v-if="!isBound" @click="handleBind" class="btn btn-primary" :disabled="isLoading">
            {{ isLoading ? $t('loading') : $t('ethereum.bind') }}
          </button>
          <button v-else @click="handleSwitch" class="btn btn-primary" :disabled="isLoading">
            {{ isLoading ? $t('loading') : $t('ethereum.switch') }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import { useEthereumStore } from '../store/ethereum';
import { getAccounts } from '../services/web3Service';
import { useAuth } from '../composables/auth';

export default {
  name: 'EthereumAccountGuard',
  setup() {
    const ethereumStore = useEthereumStore();
    const auth = useAuth();
    const showModal = ref(false);
    const isBound = ref(false);
    const currentAccount = ref(null);
    const boundAccount = ref(null);
    const isLoading = ref(false);

    const checkAccountStatus = async () => {
      if (!auth.isLoggedIn) {
        return;
      }

      try {
        isBound.value = await ethereumStore.checkBoundAccount();
        boundAccount.value = ethereumStore.state.boundAccount;
        
        const accounts = await getAccounts();
        currentAccount.value = accounts[0];
        
        if (!isBound.value) {
          showModal.value = true;
        } else if (currentAccount.value !== boundAccount.value) {
          showModal.value = true;
        }
      } catch (error) {
        console.error('检查账户状态失败', error);
      }
    };

    const handleBind = async () => {
      try {
        isLoading.value = true;
        const accounts = await getAccounts();
        if (accounts[0]) {
          await ethereumStore.bindAccount(accounts[0]);
          showModal.value = false;
        }
      } catch (error) {
        console.error('绑定账户失败', error);
      } finally {
        isLoading.value = false;
      }
    };

    const handleSwitch = async () => {
      try {
        isLoading.value = true;
        const accounts = await getAccounts();
        if (accounts[0] === boundAccount.value) {
          showModal.value = false;
        }
      } catch (error) {
        console.error('切换账户失败', error);
      } finally {
        isLoading.value = false;
      }
    };

    const handleAccountMismatch = () => {
      if (!auth.isLoggedIn) {
        return;
      }
      showModal.value = true;
    };

    onMounted(() => {
      if (auth.isLoggedIn) {
        checkAccountStatus();
        ethereumStore.setupAccountChangeListener();
        window.addEventListener('ethereumAccountMismatch', handleAccountMismatch);
      }
    });

    onUnmounted(() => {
      window.removeEventListener('ethereumAccountMismatch', handleAccountMismatch);
    });

    return {
      showModal,
      isBound,
      currentAccount,
      boundAccount,
      isLoading,
      handleBind,
      handleSwitch
    };
  }
};
</script>

<style scoped>
.ethereum-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.ethereum-modal {
  background: white;
  border-radius: 8px;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.ethereum-modal-content {
  text-align: center;
}

.ethereum-modal-body {
  margin: 20px 0;
}

.account-info {
  margin-top: 15px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.ethereum-modal-footer {
  margin-top: 20px;
}

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
}

.btn-primary {
  background-color: #1976d2;
  color: white;
  border: none;
}

.btn-primary:hover {
  background-color: #1565c0;
}

.btn-primary:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style> 